/**
 * 存歌词的数组
 */
let lrcList = []

/**
 * 解析歌词字符串
 * 得到一个歌词对象的数组
 * 每个歌词对象：
 * {time:开始时间,words:歌词内容}
 */
function parseLrc(){
    const lines = musicsText.split("\n");

    for (let i = 0; i < lines.length; i++) {
        const str = lines[i];
        const timeStr = str.slice(1,str.indexOf("]"))
        const lrc = str.slice(str.indexOf("]")+1)
        lrcList.push({
            time:parseTime(timeStr),
            words:lrc
        })
    }
}

/**
 * 把一个时间字符串解析成秒数
 * @param {string} timeStr 时间字符串
 * @return {number} 秒数
 */
function parseTime(timeStr){
    const arr = timeStr.split(":")
    return (+arr[0])*60+(+arr[1])
}
parseLrc()

/**
 * DOM对象
 * @type {{audio: HTMLAudioElement, list: Element}}
 */
var doms = {
    audio:document.querySelector("audio"),
    list:document.querySelector(".c-list"),
    container:document.querySelector(".container")
}

/**
 * 计算出，当前播放器，播放到第几秒的情况下，lrcList中，应该高亮哪一个歌词
 */
function findIndex(){
    const curTime = doms.audio.currentTime //播放器当前播放到第几秒
    for (let i = 0; i < lrcList.length; i++) {
        if (lrcList[i].time > curTime){
            return i-1
        }
    }

    // 如果for循环结束，还没有返回，说明curTime大于所有歌词的时间，那么返回最后一个歌词的下标
    return lrcList.length-1
}

/**
 * 创建歌词 li元素
 */
function createLrcElements(){
    var frag = document.createDocumentFragment() //创建文档片段
    for (let i = 0; i < lrcList.length; i++) {
        const li = document.createElement("li")
        li.textContent = lrcList[i].words
        frag.appendChild(li)
    }
    doms.list.appendChild(frag) // 把文档片段，添加到页面中(这一步是为了不改动DOM树，优化渲染)
}

console.log(lrcList);
createLrcElements()

/**
 * 容器高度
 * @type {number}
 */
let containerHeight = doms.container.clientHeight

/**
 * 每个li的高度
 * @type {number}
 */
let liHeight = doms.list.children[0].clientHeight

/**
 * 最大偏移量
 * @type {number}
 */
const maxOffset = doms.list.clientHeight - containerHeight
/**
 * 设置ul偏移量, 让当前高亮歌词
 */
function setOffset(){
    const index = findIndex()
    let offset = index * liHeight - containerHeight/2 + liHeight/2
    if (offset < 0){offset = 0} // 如果偏移量小于0，那么让偏移量为0
    if (offset > maxOffset){offset = maxOffset}

    doms.list.style.transform = `translateY(${-offset}px)`
    // 高亮歌词,先把所有的歌词都取消高亮
    for (let i = 0; i < doms.list.children.length; i++) {
        doms.list.children[i].classList.remove("active")
    }
    doms.list.children[index].classList.add("active")
}

/**
 * 添加 audio更新事件
 */
doms.audio.addEventListener("timeupdate",function(){
    setOffset()
})
